<template>
  <div class="common-layout">
    <vxe-form
        title-colon
        ref="xForm"
        title-align="right"
        title-width="150"
        :data="Flow.formData"
        :rules="Flow.formRules"
        :loading="Flow.loading"
        @submit="submitEvent"
    >
      <vxe-form-gather span="6">
        <vxe-form-item title="启用外部流程" field="IsExtFlow" :item-render="{name: '$switch', props:{openLabel:'是',openValue:1,closeLabel:'否',closeValue:0}}">   </vxe-form-item>
        <vxe-form-item title="选择外部流程" field="flow" span="24" :item-render="{}" title-overflow>
          <template #default="{data}">
            <vxe-select v-model="data.flow" placeholder="请选择外部流程" clearable >
              <vxe-option v-for="(item,index) in flows" :key="index" :value="item.ruleID" :label="item.ruleName"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="流程类型" field="FlowType" span="24" :item-render="{}" title-overflow>
        <template #default="{data}">
          <vxe-select v-model="data.FlowType" placeholder="请选择流程类型" clearable >
            <vxe-option value="dingtalk" label="钉钉"></vxe-option>
            <vxe-option value="wxwork" label="企业微信"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>
        <vxe-form-item title="发起人" field="FqrType" span="24" :item-render="{}" title-overflow>
          <template #default="{data}">
            <vxe-select v-model="data.FqrType" placeholder="请选择类型" clearable >
              <vxe-option :value="1" label="制单人"></vxe-option>
              <vxe-option :value="2" label="表单字段"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="发起人字段" field="FqrField" span="24" :item-render="{}" title-overflow="title" :visible="Flow.formData.FqrType===2">
          <template #default="{data}">
            <vxe-select v-model="data.FqrField" placeholder="请选择类型" clearable transfer>
              <vxe-optgroup v-for="(tb ,name) in TF.filter(row=>row.tableType===0)" :label="tb.tableDispName" :key="name">
                <vxe-option v-for="(item,index) in tb.Children" :key="index" :value="item.fieldName"
                            :label="tb.tableDispName+'.'+item.fieldDispName"></vxe-option>
              </vxe-optgroup>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="发起人字段类型" field="FqrFieldType" span="24" :item-render="{}" title-overflow="title" :visible="Flow.formData.FqrType===2">
          <template #default="{ data }">
            <vxe-select v-model="data.FqrFieldType" placeholder="请选择类型" clearable >
              <vxe-option value="userid" label="用户ID"></vxe-option>
              <vxe-option value="dingtalk" label="钉钉用户"></vxe-option>
              <vxe-option value="wxwork" label="企业微信"></vxe-option>
              <vxe-option value="U8" label="U8用户名"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="发起部门" field="FqbmType" span="24" :item-render="{}" title-overflow="ellipsis">
          <template #default="{data}">
            <vxe-select v-model="data.FqbmType" placeholder="请选择类型" clearable >
              <vxe-option :value="1" label="制单人部门"></vxe-option>
              <vxe-option :value="2" label="表单字段"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="发起部门字段" field="FqbmField" span="24" :item-render="{}" title-overflow="title" :visible="Flow.formData.FqbmType===2">
          <template #default="{data}">
            <vxe-select v-model="data.FqbmField" placeholder="请选择类型" clearable transfer>
              <vxe-optgroup v-for="(tb ,name) in TF.filter(row=>row.tableType===0)" :label="tb.tableDispName" :key="name">
                <vxe-option v-for="(item,index) in tb.Children" :key="index" :value="tb.tableName+'.'+item.fieldName" :label="tb.tableDispName+'.'+item.fieldDispName"></vxe-option>
              </vxe-optgroup>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="发起部门字段类型" field="FqbmFieldType" span="24" :item-render="{}" title-overflow="title" :visible="Flow.formData.FqbmType===2">
          <template #default="{ data }">
            <vxe-select v-model="data.FqbmFieldType" placeholder="请选择类型" clearable >
              <vxe-option value="userid" label="部门ID"></vxe-option>
              <vxe-option value="dingtalk" label="钉钉部门"></vxe-option>
              <vxe-option value="U8" label="U8部门编码"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="审核人回写字段" field="SHR_ReField" span="24" :item-render="{}" title-overflow="title">
          <template #default="{data}">
            <vxe-select v-model="data.SHR_ReField" placeholder="请选择类型" clearable transfer>
              <vxe-optgroup v-for="(tb ,name) in TF.filter(row=>row.tableType===0)" :label="tb.tableDispName" :key="name">
                <vxe-option v-for="(item,index) in tb.Children" :key="index" :value="tb.tableName+'.'+item.fieldName"
                            :label="tb.tableDispName+'.'+item.fieldDispName"></vxe-option>
              </vxe-optgroup>
            </vxe-select>
          </template>
        </vxe-form-item>
      </vxe-form-gather>
      <vxe-form-gather span="18">
        <vxe-form-item title="" field="BackField" span="24" :item-render="{}">
          <template #default="{ data }">
            <div>
              <div>其它回写字段</div>
              <vxe-toolbar>
                <template #buttons>
                  <vxe-button @click="insertNew">新建</vxe-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                  border
                  size="mini"
                  ref="Back"
                  width="auto"
                  auto-resize
                  :row-config="{isCurrent: true, isHover: true}"
                  :edit-config="{trigger: 'click', mode: 'cell'}"
                  :data="Flow.formData.BackField"
              >
                <vxe-column type="seq" width="60" tree-node></vxe-column>
                <vxe-column field="name" title="字段名称" width="260" >
                  <template #default="{row}">
                    <vxe-select v-model="row.name" placeholder="请选择字段" clearable transfer>
                      <vxe-optgroup v-for="(tb ,name) in TF.filter(row=>row.tableType===0)" :label="tb.tableDispName" :key="name">
                        <vxe-option v-for="(item,index) in tb.Children" :key="index" :value="tb.tableName+'.'+item.fieldName"
                                    :label="tb.tableDispName+'.'+item.fieldDispName"></vxe-option>
                      </vxe-optgroup>
                    </vxe-select>
                  </template>
                </vxe-column>
                <vxe-column field="type" title="主子表字段" width="80" :cell-render="{name: '$switch',defaultValue:0, props:{openLabel:'主',openValue:1,closeLabel:'子',closeValue:2}}"></vxe-column>
                <vxe-column field="key" title="回写关键条件" width="150" :cell-render="{name: '$switch',defaultValue:0, props:{openLabel:'是',openValue:1,closeLabel:'否',closeValue:0}}"></vxe-column>
                <vxe-column field="field" title="表单名称" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-column>
                <vxe-column  title="操作" :edit-render="{}">
                  <template #default="{ row }">
                    <vxe-button type="text" icon="fa fa-trash-o" @click="remove(row)"></vxe-button>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>

          </template>
        </vxe-form-item>
      </vxe-form-gather>
      <vxe-form-item align="center" span="24">
        <template #default>
          <vxe-button type="submit" status="primary" content="保存"></vxe-button>
          <vxe-button type="reset" content="重置"></vxe-button>
          <vxe-button @click="Test" content="Test"></vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import {onBeforeMount, onMounted, reactive, ref, toRefs} from "vue"
import {listLkSelectrule} from "/@/api/linkoo/form/lkDataRules";
import {useRoute, useRouter} from 'vue-router';
import {watch} from "vue-demi";
import XEUtils from 'xe-utils'

export default {
  props: ['TF','data'],
  emits:['saveExtFlow'],

  setup(props, ctx) {
    let Back = ref(null)
    const Flow = reactive({
      loading: false,
      formData: {FlowType:null,
        FqrType:null,
        FqrField:null,
        FqrFieldType:null,
        FqbmType:null,
        FwbmField:null,
        FqbmFieldType:null,
        ShrReField:null,
        BackField:[]},
      formRules: {      }
    })
    const route = useRoute()
    let state = reactive({
      loaddata:false,
      Data:[],
      flows:[],
      types: [],
    })
    const Test = () => {
      console.log(props.TF)
    }
    watch(props,()=>{
      if(!state.loaddata){
        loadData()
      }
    })
    const loadData=()=>{
      Flow.formData=props.data
      let templateID=props.TF[0].templateID
      listLkSelectrule({isActive:1,type:3,isExtFlow:1,templateID:templateID}).then(res=>{
        state.flows=res.data.list
        state.loaddata=true
      })
    }
    const remove = async (row) => {
      const $table=Back.value
      await $table.remove(row)
    }
    const insertNew = async (row) => {
        const record={name:null,update:null,key:null,title:null}
      const $table=Back.value
      const { row: newRow } = await $table.insertAt(record,-1)
    }


    const submitEvent = () => {
      Flow.loading = true
      Flow.formData.BackField=Back.value.getTableData().fullData.map(row=>{
        delete row['_X_ROW_KEY'];return row
      })
      console.log('数据:', Flow.formData)
      ctx.emit('saveExtFlow',XEUtils.toJSONString(Flow.formData))
        Flow.loading = false
    }

    return {
      ...toRefs(state),
      Flow,
      submitEvent,
      Back,
      remove,
      insertNew,
      Test
    }
  }
}
</script>

<style scoped>
.el-header {
  padding: 0;
  height: 40px;
}

.el-main {
  border-radius: 5px;
  height: 100vh;
  padding: 0;
}
</style>